<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Magic API</title>
		<meta charset="utf-8" />
		<link rel="icon" href="images/favicon.png" />
		<link rel="stylesheet" href="layui/css/layui.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="monaco/loader.js"></script>
		<script type="text/javascript">require.config({ paths: { 'vs': 'monaco' }});</script>
		<script type="text/javascript" src="monaco/language/magicscript.js"></script>
		<script type="text/javascript" src="layui/layui.all.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
	</head>
	<body>
		<div class="layui-layout">
			<div class="layui-header">
				<div class="layui-logo"></div>
			</div>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a target="_blank" href="http://www.ssssssss.org">帮助文档</a></li>
				<li class="layui-nav-item">
					<a target="_blank" href="https://shang.qq.com/wpa/qunwpa?idkey=10faa4cf9743e0aa379a72f2ad12a9e576c81462742143c8f3391b52e8c3ed8d">加入QQ群</a>
				</li>
				<li class="layui-nav-item">
					<a target="_blank" href="https://gitee.com/ssssssss-team/magic-api">
						<img src="https://gitee.com/ssssssss-team/magic-api/badge/star.svg?theme=white" alt="gitee star">
					</a>
				</li>
				<li class="layui-nav-item">
					<a target="_blank" href="https://github.com/ssssssss-team/magic-api">
						<img src="https://img.shields.io/github/stars/ssssssss-team/magic-api.svg?style=social" alt="github star" style="background: none">
					</a>
				</li>
				<span class="layui-nav-bar" style="width: 0px; left: 0px; opacity: 0; top: 55px;"></span>
			</ul>
			<div class="layui-bottom">
				<div class="layui-left">
					<div class="api-search">
						<input class="layui-input" type="text" placeholder="请输入接口名称或地址搜索"/>
					</div>
					<div class="layui-side">
						<div class="layui-side-scroll scroller">
							<div class="api-list" id="api-list" >

							</div>
						</div>
					</div>
				</div>
				<div class="layui-right-container">
					<div class="properties-container layui-form">
						<div class="layui-input-placeholder">
							<div class="layui-input-inline" style="width: 150px;margin-left: 145px;">接口分组</div>
							<div class="layui-input-inline" style="width: 100px;margin-left: 5px;">请求方法</div>
							<div class="layui-input-inline" style="width: 200px;margin-left: 5px;">接口名称</div>
							<div class="layui-input-inline" style="width: 300px;margin-left: 5px;">接口地址</div>
						</div>
						<div>
							<ul class="layui-btn-group">
								<li title="新增" class="btn-create"><i class="layui-icon layui-icon-add-1"></i></li>
								<li title="测试(Ctrl+Q)" class="btn-test"><i class="layui-icon layui-icon-triangle-r"></i></li>
								<li title="保存(Ctrl+S)" class="btn-save"><i class="layui-icon layui-icon-release"></i></li>
								<li title="删除" class="btn-delete"><i class="layui-icon layui-icon-delete"></i></li>
							</ul>
							<div class="layui-input-inline" style="width: 150px;margin-left: 5px;">
								<select name="group" lay-search>
									<option value="">请输入组名</option>
									<option value="未分组">未分组</option>
								</select>
							</div>
							<div class="layui-input-inline" style="width: 100px;margin-left: 5px;">
								<select name="method">
									<option value="GET">GET</option>
									<option value="POST">POST</option>
									<option value="PUT">PUT</option>
									<option value="DELETE">DELETE</option>
								</select>
							</div>
							<div class="layui-input-inline" style="width: 200px;margin-left: 5px;">
								<input type="text" name="name" class="layui-input" placeholder="请输入接口名称"/>
							</div>
							<div class="layui-input-inline" style="position: absolute;left:615px;right:10px;">
								<input type="text" name="path" class="layui-input" placeholder="请输入接口地址"/>
							</div>
						</div>
					</div>
					<div class="editor-container" id="editor"></div>
					<div class="layout-resizer-x"></div>
					<div class="layui-right">
						<div class="request-container">
							<div class="layui-tab" lay-filter="request">
								<ul class="layui-tab-title">
									<li class="layui-this">请求参数</li>
									<li>接口选项</li>
								</ul>
								<div class="layui-tab-content">
									<div class="layui-tab-item layui-show">
										<div id="request-parameter"></div>
									</div>
									<div class="layui-tab-item">
										<div id="option-parameter"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="layout-resizer-y"></div>
						<div class="output-container">
							<div class="layui-tab" lay-filter="output-container">
								<ul class="layui-tab-title">
									<li lay-id="output" class="layui-this">请求结果</li>
									<li lay-id="debug">调试信息</li>
								</ul>
								<div class="layui-tab-content">
									<div class="layui-tab-item layui-show">
										<div id="output-result"></div>
									</div>
									<div class="layui-tab-item scroller">
										<table class="layui-table" lay-size="sm" style="height: auto">
											<thead>
											<tr>
												<th>变量名</th>
												<th>变量值</th>
												<th>变量类型</th>
											</tr>
											</thead>
											<tbody id="debug-tbody">

											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>